<template>
  <aside :class="['sidebar', { 'sidebar-collapsed': isCollapsed }]">
    <nav>
      <ul>
        <li>
          <svg
              t="1735061561241"
              class="icon"
              viewBox="0 0 1053 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1031"
              width="40"
              height="40"
          >
            <path
                d="M159.91661 597.146A159.933 159.933 0 0 1 0.15661 437.388a37.443 37.443 0 0 1 74.887 0 84.872 84.872 0 0 0 169.743 0 37.443 37.443 0 0 1 74.887 0 159.933 159.933 0 0 1-159.759 159.758z"
                fill="#d81e06"
                p-id="1032"
            ></path>
            <path
                d="M404.54661 597.146a159.933 159.933 0 0 1-159.76-159.758 37.443 37.443 0 0 1 74.888 0 84.872 84.872 0 0 0 169.743 0 37.443 37.443 0 0 1 74.886 0A159.933 159.933 0 0 1 404.54661 597.146z"
                fill="#d81e06"
                p-id="1033"
            ></path>
            <path
                d="M649.17561 597.146A159.933 159.933 0 0 1 489.41661 437.388a37.443 37.443 0 0 1 74.886 0 84.872 84.872 0 0 0 169.743 0 37.443 37.443 0 0 1 74.887 0 159.933 159.933 0 0 1-159.758 159.758z"
                fill="#d81e06"
                p-id="1034"
            ></path>
            <path
                d="M893.80461 597.146A159.933 159.933 0 0 1 734.04661 437.388a37.443 37.443 0 0 1 74.887 0 84.872 84.872 0 0 0 169.743 0 37.443 37.443 0 0 1 74.887 0 159.933 159.933 0 0 1-159.759 159.758z"
                fill="#d81e06"
                p-id="1035"
            ></path>
            <path
                d="M1016.11961 467.343a37.443 37.443 0 0 1-36.045-27.459l-67.223-239.637H138.64861L73.74661 439.684A37.498 37.498 0 1 1 1.35661 420.09l72.39-267.096a37.443 37.443 0 0 1 36.245-27.633h831.242a37.443 37.443 0 0 1 36.045 27.459l74.887 267.095a37.443 37.443 0 0 1-36.046 47.429zM948.72161 1024H122.47261a37.443 37.443 0 0 1-37.443-37.443v-432.72a37.443 37.443 0 0 1 74.886 0v395.276h751.363v-402.44a37.443 37.443 0 0 1 74.887 0v439.884A37.443 37.443 0 0 1 948.72161 1024z"
                fill="#d81e06"
                p-id="1036"
            ></path>
            <path
                d="M456.96661 1009.023H282.23061a24.962 24.962 0 0 1-24.962-24.963V669.537a24.962 24.962 0 0 1 24.962-24.963H456.96661a24.962 24.962 0 0 1 24.962 24.963V984.06a24.962 24.962 0 0 1-24.962 24.963z m-149.774-49.925h124.811v-264.6h-124.81z m524.207-102.345h-257.11a24.962 24.962 0 0 1-24.963-24.962V674.529a24.962 24.962 0 0 1 24.962-24.962h257.11a24.962 24.962 0 0 1 24.963 24.962v157.262a24.962 24.962 0 0 1-24.962 24.962zM599.25061 806.83h207.187V699.49H599.25061z m214.675-614.07a37.443 37.443 0 0 1-37.443-37.444V74.887h-509.23v73.264a37.443 37.443 0 1 1-74.886 0V37.443A37.443 37.443 0 0 1 229.81061 0h584.115a37.443 37.443 0 0 1 37.444 37.443v117.872a37.443 37.443 0 0 1-37.444 37.443z"
                fill="#d81e06"
                p-id="1037"
            ></path>
          </svg>

        </li>

        <li>
          <router-link to="/home/browse">
            <i class="icon iconfont icon-liulan"></i>
            <span class="text">浏览商品</span>
          </router-link>
        </li>
        <li>
          <router-link to="/home/add">
            <font-awesome-icon :icon="['fas', 'plus']" class="icon"/>
            <span class="text">添加商品</span>
          </router-link>
        </li>
        <li>
          <router-link to="/home/finebi">
            <span class="iconfont icon-keshihua icon"></span>
            <span class="text">数据可视化</span>
          </router-link>
        </li>
        <li>
        <router-link to="/home/settings">
          <font-awesome-icon :icon="['fas', 'gear']" class="icon" />
          <span class="text">账号设置</span>
        </router-link>
        </li>
      </ul>
    </nav>
  </aside>
</template>

<script setup>
const props = defineProps({
  isCollapsed: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped>
/* 默认样式 */
.sidebar {
  background-color: var(--primary-color);
  color: rgba(255, 255, 255, 0.9);
  padding: 0 1rem;
  box-sizing: border-box;
  transition: width 0.8s ease;
  position: relative;
}

/* 折叠状态样式 */
.sidebar-collapsed {
}

/* 导航菜单样式 */
.sidebar nav ul {
  list-style: none;
  padding: 0;
}

.sidebar nav ul li {
  margin-bottom: var(--spacing-small);
  &:nth-child(1) {
    display: flex;
    justify-content: space-around;
    align-items: center;
    &:hover {
      cursor: pointer;
    }
  }
}

.sidebar nav ul li a {
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
  font-size: var(--font-size-base);
  padding: var(--spacing-small);
  border-radius: var(--border-radius);
  transition: background-color var(--transition-speed);
  white-space: nowrap;
  text-overflow: ellipsis;
  .icon {
    margin-right: var(--spacing-small);
  }
  &:hover {
    background-color: var(--secondary-color);
  }
}

/* 折叠时隐藏文本 */
.sidebar-collapsed .text {
  display: none;
}

.sidebar-collapsed .icon {
  margin-right: 0; /* 折叠时移除图标间距 */
}

@media (max-width: 768px) {
  .sidebar nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
